.third-party-inspection {
  min-width: 390px;
  min-height: 200px;
  box-sizing: border-box;
  background: linear-gradient( 180deg, #14191F 0%, #3C4249 100%), linear-gradient( 178deg, rgba(9,11,13,0) 0%, #26394D 100%), radial-gradient( 185% 43% at 53% -3%, rgba(166,213,255,0.5) 0%, rgba(166,209,255,0) 24%, rgba(179,212,255,0) 100%);
  border: 1px solid rgba(77,89,102,0.25);
  font-family: 'SourceHanSansSC', 'DINAlternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  
  // 统计数据区域
  .chart-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 14px;
    padding: 5px 14px;
    flex-shrink: 0;
    .area-item{
      width: 48%;
      height: 34px;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      font-size: 12px;
      color: rgba(255,255,255,.8);
      .item-value{
        font-family: 'DINAlternate';
        font-weight: bold;
        font-size: 15px;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }

  // 表格区域
  .table-area {
    width: 100%;
    padding: 20px 20px 0;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    // 表头
    .table-header {
      width: 100%;
      display: flex;
      align-items: center;
      height: 40px;
      flex-shrink: 0;
      .header-cell {
        // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
        font-family: SourceHanSansSC, sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    // 表格主体
    .table-body {
      width: 100%;
      overflow-y: auto;
      flex: 1;
      .table-row:nth-child(2n){
        background: rgba(16,85,163,0.18);
      }
      .table-row {
        display: flex;
        align-items: center;
        // Frame 26备份 17: 460px 40px, rgba(16,85,163,0.18)
        width: 100%;
        height: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          background: rgba(16, 85, 163, 0.35) !important;
          transform: translateX(2px);

          .table-cell {
            color: #FFFFFF !important;
            filter: brightness(1.1);
          }
        }

        &:active {
          transform: translateX(0);
        }

        .table-cell {
          // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
          font-family: SourceHanSansSC, sans-serif;
          font-weight: 500;
          font-size: 12px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  // 数值发光动画
  @keyframes glow {
    from {
      text-shadow: 0 0 5px rgba(26, 215, 255, 0.5);
    }
    to {
      text-shadow: 0 0 10px rgba(26, 215, 255, 0.8), 0 0 15px rgba(26, 215, 255, 0.6);
    }
  }

  // 淡入动画
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 脉冲动画
  @keyframes pulse {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.6;
    }
  }

  // 表格行进入动画
  &__table-row {
    animation: slideInUp 0.3s ease-out;
    animation-fill-mode: both;

    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.05}s;
      }
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 15px;

    &__header {
      flex-direction: column;
      gap: 15px;
    }

    &__item {
      width: 100% !important;
      height: 40px !important;
    }

    &__item-title {
      font-size: 14px !important;
    }

    &__item-value {
      font-size: 18px !important;
    }

    &__table {
      font-size: 12px !important;
    }
  }
}
